<template>
	<div class="title_container">
		<div class="left_title">
			<div class="tabs">
				<div
					class="li_tab"
					v-for="(item, index) in tabsParam"
					@click="toggleTabs(index)"
					:class="{ active: index === nowIndex }"
					:style="{ borderRight: index == tabsParam.length - 1 ? 'none' : '' }"
					:key="index"
				>
					{{ item }}
					<span></span>
				</div>
			</div>
			<div class="time_container">
				<p>
					已选时间：{{ props.tateData[0] }} 至
					{{ props.tateData[tateData.length - 1] }}
				</p>
			</div>
		</div>

		<el-button class="right-el-button" @click="handleExport">数据导出</el-button>
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { exportInfor } from '/@/api/index';
import { ElMessageBox } from 'element-plus';

const emit = defineEmits(['sendTitleInd']);
const props = defineProps({
	flag: {
		type: Number,
	},
	tateData: {
		type: Array,
    default:[]
	},
	turnoverData: {
		type: Array,
	},
});

let nowIndex = ref(1);
let value = ref([]);
let tabsParam = ['昨日', '近7日', '近30日', '本周', '本月'];

watch(
	() => props.flag,
	() => {
		nowIndex.value = props.flag as number;
	}
);

// tab切换
const toggleTabs = (index: number) => {
	nowIndex.value = index;
	value.value = [];
	emit('sendTitleInd', index + 1);
};

//  数据导出
/** 导出按钮操作 */
const handleExport = () => {
	ElMessageBox.confirm('是否确认导出最近30天运营数据?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		const res:any = await exportInfor();
		let url = window.URL.createObjectURL(res);
		const a = document.createElement('a');
		document.body.appendChild(a);
		a.href = url;
		a.download = '运营数据统计报表.xlsx';
		a.click();
		window.URL.revokeObjectURL(url);
	});
};
</script>
<style lang="scss" scoped>
.title_container {
	width: 100%;
	display: flex;
	justify-content: space-between;
	.left_title {
		display: flex;
		align-items: center;
		.tabs {
			display: flex;
			align-items: center;
			border: 1px solid #e5e4e4;
			border-radius: 5px;
			.li_tab {
				width: 80px;
				height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				border-right: 1px solid #e5e4e4;
        cursor: pointer;
			}
			.active {
				background-color: #ffc200;
			}
		}
    .time_container{
      margin-left: 20px;
    }
	}
}
</style>
